<template>
  <div class="selector">
    <div class="home" @click="onHomeClick">
      <el-icon>
        <HomeFilled />
      </el-icon>
    </div>
    <el-select v-model="year" size="large" class="mine-selector-year">
      <el-option label="2025年" value="2025" />
      <el-option label="2024年" value="2024" />
      <el-option label="2023年" value="2023" />
      <el-option label="2022年" value="2022" />
    </el-select>
    <el-select v-model="openPit" size="large" placeholder="请选择露天矿" filterable class="mine-selector-mine"
      @change="onChange">
      <el-option v-for="item in mineList" :key="item.openPitId" :label="item.areaName" :value="item.openPitId" />
    </el-select>
  </div>
</template>

<script setup>
import mineList from "@/assets/data/mineTree.json";
import useUserStore from "@/store/modules/user";
import useOnemapStore from "@/store/modules/onemap";
import { getCurrentInstance } from "vue";
import { emitter } from "@/utils/events";

const year = ref("2025");
const openPit = ref();

const onChange = (value) => {
  const obj = mineList.find((item) => item.openPitId === value);
  useOnemapStore().setSelectedNode(obj);
  emitter.emit(`flyToMine`);

};
const emits = defineEmits(["toHome"]);
const onHomeClick = () => {
  openPit.value = "";
  emits("toHome");
};

const toTopDistrict = () => {
  const { areaId } = useUserStore();
  useOnemapStore().setSelectedNode({
    id: areaId,
    areaId: areaId,
    code: areaId.toString(),
    level: 3,
    openPitId: null,
    childrenCode: [areaId],
  });
};

const init = () => {
  const selectedNode = useOnemapStore().selectedNode;
  if (selectedNode.level === 4) {
    openPit.value = selectedNode.openPitId;
  } else {
    openPit.value = undefined;
    toTopDistrict();
  }
};

setTimeout(() => {
  init();
}, 500);
defineExpose({ toTopDistrict });
// openPit
</script>

<style lang="scss" scoped>
.selector {
  display: flex;
  align-items: center;
  height: 52px;
  pointer-events: all;
  transition: all 0.3s;

  .home {
    width: 52px;
    color: #fff;
    height: 100%;
    box-sizing: border-box;
    background-color: rgba(2, 57, 45, 0.65);
    box-shadow: 0 0 0 1px var(--el-border-color) inset;
    font-size: 24px;
    text-align: center;
    line-height: 52px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: 0px;

    &:hover {
      cursor: pointer;
      background-color: rgba(2, 57, 45, 0.95);
    }

    &:active {
      i {
        scale: 0.95;
      }
    }
  }

  :deep(.mine-selector-year) {
    width: 120px;

    .el-select__wrapper {
      border-radius: 0px;
      height: 52px;
    }
  }

  :deep(.mine-selector-mine) {
    width: 220px;

    .el-select__wrapper {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      height: 52px;
    }
  }
}
</style>
